<template>
  <div :style="`position: absolute;top:${position.y}px;left:${position.x}px`" class="use-tips">
    {{name}}
    <div v-if="JSON.stringify(userInfo) != '{}'">
      <p>关注：{{userInfo.followers}}</p>
      <p>粉丝：{{userInfo.fans}}</p>
      <p>博客：{{userInfo.blogs}}</p>
    </div>
  </div>
</template>
<script>
export default {
  props:{
    name: String,
    uid: Number, 
    position: Object
  },
  data() {
    return {
      userInfo:{}
    }
  },
  created() {
    if(this.uid){
      this.getUserInfoByUid(this.uid)
    }
  },
  methods: {
    async getUserInfoByUid(id){
      await this.$http.get(`/user/getUserInfoByUid?id=${id}`).then(res=>{
        this.userInfo = res.data.data
      })
    }
  },
}
</script>
<style scoped>
  .use-tips{
    display: block;
    min-width: 200px;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 5px;
    box-shadow: #ccc;
  }
</style>